<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 使用bootstrap需要导入三个文件 -->
    <script src="./bootstrap/js/jquery-1.12.4.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- pagination插件 -->
    <script src="./jquery.twbsPagination.js"></script>
</head>

<body>
    <!-- 
        row：bootstrap栅格系统的行
        text-center : bootstrap中的内容居中。 底层原理：text-align:center
     -->
    <div class="row text-center">
        <ul id="pagination" class="pagination-sm"></ul>
    </div>


    <button id="btn">筛选文章</button>
    <script>
        /* 
        发现问题： 当总页数发生变化的时候，这个插件需要重新加载
        分析问题： 相同代码需要执行多次，可以使用函数封装
        */

        /**
        * @description:加载分页组件 
        * @param {type} totalPages ：总页数
        * @param {type} startPage ：当前页数
        * @return: 
        */
        function loadPagination(totalPages, startPage) {
            //(1)先销毁上一次的分页数据
            $('#pagination').twbsPagination('destroy');
            //(2)加载分页插件
            $('#pagination').twbsPagination({
                totalPages: totalPages,
                startPage: startPage,
                visiblePages: 6,
                first: '首页',
                prev: '上一页',
                next: '下一页',
                last: '尾页',
                onPageClick: function (event, page) {
                    //如果点击的页数与当前页数不一致，则发送ajax请求
                    if (page != startPage) {
                        console.log('当前页：' + startPage);
                        console.log('点击页：' + page);
                        
                    };
                }
            });
        };

        //页面一加载：默认请求第一页数据
        loadPagination(20,1);

        $('#btn').click(function(){
            //生成1-100随机数，模拟文章列表筛选功能
            var num = Math.ceil(Math.random()*100);
            //筛选之后默认选择第一页
            loadPagination(num,1);
        });

    </script>
</body>

</html>